<!--  -->
<template>
  <el-dialog
    v-model="dialogShow"
    :title="model.id == 0 ? '添加' : '修改'"
    width="800"
    :before-close="handleClose"
  >
    {{ model.pictures }}
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      label-width="auto"
      class="demo-ruleForm"
      :model="model"
      :size="formSize"
      status-icon
      :rules="rules"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="model.title" />
      </el-form-item>
      <el-form-item label="描述" prop="comment">
        <el-input v-model="model.comment" />
      </el-form-item>
      <el-form-item label="封面图片">
        <el-upload
          class="avatar-uploader"
          :action="uploadBaseUrl"
          :show-file-list="false"
          :headers="headers"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="model.photo" :src="imgBaseUrl + model.photo" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="其它图片">
        <el-upload
          v-model:file-list="pictureList"
          class="upload-demo"
          :action="uploadBaseUrl"
          :on-success="handlePictrueSuccess"
          list-type="picture"
          :headers="headers"
          :on-remove="handleRemove"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="上传视频">
        <el-upload
          v-model:file-list="videoList"
          class="upload-demo"
          :action="uploadBaseUrl"
          :headers="headers"
          :on-success="handleVideoSuccess"
          :on-remove="handleVideoRemove"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">请上传mp4格式的文件</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="详细信息" prop="content">
        <el-input v-model="model.content" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, reactive, onMounted } from "vue";
import { Record } from "../services/records/type";
import { addRecord, getRecord } from "../services/records/records";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
const imgBaseUrl = import.meta.env.VITE_IMG_URL;
const uploadBaseUrl = import.meta.env.VITE_BASE_URL + "api/upload/add";
const headers = reactive({
  Authorization: sessionStorage.getItem("token"),
});
const emits = defineEmits(["close"]);
const props: any = defineProps(["typeid", "id"]);

const pictureList = ref<UploadUserFile[]>([]);
const videoList = ref([]);

const model = reactive<Record>({
  id: props.id,
  title: "",
  typeid: props.typeid,
  addtime: null,
  photo: "",
  comment: "",
  content: "",
  state: 1,
  videos: [],
  pictures: [],
});

const getModel = async () => {
  if (model.id) {
    const res = await getRecord(model.id);
    if (res.errCode === 10000) {
      console.log(111111111111, res.data);

      Object.assign(model, res.data);

      console.log(999, res.data.pictures);

      if (res.data.pictures.length > 0) {
        pictureList.value = res.data.pictures.map((item: any) => ({
          name: item.oldfilename,
          filename: item.filename,
          url: imgBaseUrl + item.filename,
        }));
      }
    }
  }
};
onMounted(() => {
  getModel();
});
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<RuleForm>>({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
});

const dialogShow = ref(true);
const handleClose = (done: () => void) => {
  emits("close", false);
};
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  console.log(response);
  if (response.errCode === 10000) {
    model.photo = response.data;
  }
};
const handlePictrueSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  console.log(response);
  if (response.errCode === 10000) {
    model.pictures.push({
      oldfilename: response.data,
      filename: response.data,
    });
  }
};
const handleVideoSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  if (response.errCode === 10000) {
    model.videos.push({
      oldfilename: response.data,
      filename: response.data,
    });
  }
};

const handleRemove: UploadProps["onRemove"] = (uploadFile: any, uploadFiles) => {
  model.pictures = model.pictures.filter(
    (item: any) => item.filename != (uploadFile.response?.data ?? uploadFile.filename)
  );
};
const handleVideoRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  model.videos = model.videos.filter(
    (item: any) => item.filename != uploadFile.response.data
  );
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await addRecord(model);
      if (res.errCode === 10000) {
        emits("close", true);
      } else {
        ElMessage.error(res.errMsg ?? "请求失败");
      }
    }
  });
};
console.log(888888888888);
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.upload-demo {
  width: 500px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>
